import React from 'react'
import { Button, Table } from 'antd'
import { ColumnProps } from 'antd/lib/table'
import { formatTime } from '~/utils/utils'

const colums = ({
  onClickViewCertificate,
  onClickViewInstrument,
  onClickViewUser,
  onClickViewItem
}: any): ColumnProps<any>[] => [
  {
    title: '序号',
    dataIndex: 'id',
    align: 'center',
    render: (_: any, record: any, index: number) => <div>{index + 1}</div>
  },
  {
    title: '凭证名称',
    dataIndex: 'voucherName',
    align: 'center',
    render: (voucherName: any) => <a>{voucherName}</a>
  },
  {
    title: '制作时间',
    dataIndex: 'applyTime',
    align: 'center',
    render: (applyTime: any) => <div>{formatTime(applyTime)}</div>
  },
  {
    title: '制作单位',
    dataIndex: 'makeCompanyName',
    key: 'makeCompanyName',
    align: 'center'
  },
  {
    title: '查看',
    key: 'age',
    align: 'center',
    render: (_: any, record: any) => (
      <div>
        <Button onClick={() => onClickViewItem(record)}>物品</Button>
        <Button onClick={() => onClickViewUser(record)}>人员</Button>
        <Button onClick={() => onClickViewCertificate(record.voucherId)}>凭证</Button>
        <Button onClick={() => onClickViewInstrument(record)}>文书</Button>
      </div>
    )
  }
]

const WaitingList = ({
  waitCastItems,
  onClickViewCertificate,
  onClickViewInstrument,
  onClickViewUser,
  onClickViewItem
}: any) => {
  return (
    <div>
      <Table
        rowKey="id"
        dataSource={waitCastItems}
        pagination={{
          size: 'default',
          total: waitCastItems.length,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: total => `共 ${total} 条`
        }}
        bordered
        columns={colums({ onClickViewCertificate, onClickViewInstrument, onClickViewUser, onClickViewItem })}
      />
    </div>
  )
}

export default WaitingList
